<template>
  <div class="app-container home">
    <el-card class="update-log">
      <el-form :model="queryParams" size="small" :inline="true">
        <el-form-item label="电话" prop="mobile">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入电话号码"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item label="关键字" prop="outTradeNo">
          <el-input
            v-model="queryParams.keyWord"
            placeholder="请输入关键字"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="reset()">重置</el-button>
        </el-form-item>

      </el-form>

      <div slot="header" class="clearfix">
        <span>查询记录</span>
      </div>
      <el-table v-loading="loading" :data="records" row-key="id">
        <el-table-column width="90" label="查询类目" align="center" prop="charge_name"/>
        <el-table-column width="100" label="查询时间" align="center" prop="charge_time"/>
        <el-table-column width="150" label="查询关键字" align="center" prop="key_word"/>
        <el-table-column width="80" label="查询结果" align="center" prop="query_result"/>
        <el-table-column width="160" label="具体查询信息" align="center">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.query_info!=undefined && scope.row.query_info!=''" placement="top-start"
                        :title="scope.row.key_word+' 的查询信息'" width="900" trigger="hover">
              <div>{{ scope.row.query_info }}</div>
              <span slot="reference">{{ scope.row.query_info.substr(0, 30) + '...' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="60" label="付费源" align="center" prop="pay_source"/>
        <el-table-column width="60" label="付费额" align="center" prop="cost"/>
        <el-table-column width="80" label="付费套餐" align="center" prop="pay_combo"/>
        <el-table-column width="80" label="剩余额度" align="center" prop="pay_combo_balance"/>
        <el-table-column width="110" label="电话" align="center" prop="mobile"/>
        <el-table-column width="150" label="用户openId" align="center" prop="open_id"/>
      </el-table>

      <pagination
        v-show="total>0"
        :pageSizes="[10, 20,40,60]"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"/>
    </el-card>
  </div>
</template>

<script>
  import {getLP, getSelectRecord} from "@/api/weiChat";

  import Cookies from "js-cookie";

  export default {
    data() {
      return {
        loading: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          mobile: '',
          keyWord: ''
        },
        total: 0,
        records: []
      }
    },
    created() {
      if (Cookies.get('jfT') == undefined) {
        getLP().then(res => {
          Cookies.set('jfT', res.data)
          this.getList()
        })
      } else {
        this.getList()
      }
    },
    methods: {
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },

      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          mobile: '',
          outTradeNo: '',
          buyerId: '',
          body: '',
          tradeState: '',
          moreInfo: ''
        }
        this.getList()
      },
      getList() {
        this.loading = true
        getSelectRecord(this.queryParams, Cookies.get('jfT')).then((res) => {
          this.records = res.data.records
          this.total = res.data.total
          this.loading = false
        })
      }
    }

  };
</script>

<style scoped lang="scss">
  .home {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>

